<template>
  <div class="wrapper">

    <a-layout>
      <!-- 侧边栏 -->
      <a-layout-sider   
        v-model:collapsed="collapsed"
        :trigger="null"
        collapsable="true"
      >
        <Sider></Sider>
      </a-layout-sider>
      <a-layout>
        <!-- 顶部header -->
        <a-layout-header>
          <menu-unfold-outlined 
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
        </a-layout-header>

        <!-- 内容content -->
        <a-layout-content>
          <Content></Content>
        </a-layout-content>

        <!-- 底部footer -->
        <a-layout-footer>
          Nomal Train System ©2020 Created by 200320105
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>

  
</template>

<script>
  import Sider from '@/components/Sider.vue'
  import Content from '@/components/Content.vue'

  import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'

  export default {
    name: 'App', 
    components: {
      MenuUnfoldOutlined, MenuFoldOutlined, 
     Sider, Content
    }, 
    data() {
      return {
        collapsed: false,
      }
    }
  }
</script>

<style scoped>
  .wrapper {
    height: 100%;
  }

  /deep/ .ant-layout-sider {
    background: #fff
  }

  /deep/ .ant-layout-header {
    background: #fff; 
    padding: 0; 
    height: 50px; 
    line-height: 50px;  
  }

  /deep/ .ant-layout-content {
    margin: 16px 16px; 
    /* padding: 16px;  */
    background: rgb(255, 255, 255); 
    min-height: 640px;
  }

  /deep/ .ant-layout-footer {
    margin-bottom: 0; 
    padding: 16px; 
    text-align: center;
  }

  .trigger {
    font-size: 18px;
    line-height: 50px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .trigger:hover {
    color: #1890ff;
  }
</style>
